// Global CSS rules for all screen size
#sidebar {
    font-family:        map-get($font-families, 'sidebar');
    height:             100%;
    position:           fixed;
    top:                0;
    background:         map-get($sidebar, background);
    overflow:           auto;
    z-index:            map-get($z-indexes, l-sidebar);
    // Sidebar animation
    // Transition style (push)
    transition:         transform .25s ease-in-out;
    -webkit-transition: -webkit-transform .25s ease-in-out;
    // Improve smoothing of the font by adding subpixel in Safari
    @include prefix(font-smoothing, antialiased, 'webkit');

    .sidebar-container {
        overflow: auto;
    }
    // Author information
    .sidebar-profile {
        color:         map-get($sidebar, color);
        text-align:    center;
        padding-top:   18px;
        margin-bottom: 15px;

        .sidebar-profile-picture {
            display: block;
            margin:  0 auto;
        }
        .sidebar-profile-name {
            font-size: 1.1em;
            color:     map-get($sidebar, color);
        }
    }
    // Sidebar's buttons
    ul.sidebar-buttons {
        padding: 0;
        margin:  0 0 20px 0;

        li.sidebar-button {
            display:     block;
            width:       100%;
            // Height of a link in the menu
            height:      45px;
            line-height: 45px;

            .sidebar-button-link {
                color:   map-get($sidebar, color);
                display: block;
                height:  100%;

                &:hover,
                &:active {
                    text-decoration: none;
                    color:           lighten(map-get($sidebar, color), 35);
                }
            }
        }
        &:first-child {
            margin-top: 5px;
        }
    }
}

// Define sidebar behavior configured in `_config.yml` for small screen
// On `$small-and-down` (small screen): It hide by default the sidebar
// and with javascript located in `source/_js/_sidebar.js`, it will animate the swipe of the sidebar
@media #{$small-and-down} {
    #sidebar {
        &[data-behavior="1"],
        &[data-behavior="2"],
        &[data-behavior="4"],
        &[data-behavior="5"] {
            left: -#{map-get($sidebar, lg-screen-width)};
            @include sidebar-lg;
        }
        &[data-behavior="3"],
        &[data-behavior="6"] {
            left: -#{map-get($sidebar, md-screen-width)};
            @include sidebar-md;
        }
    }
}

// Define sidebar behavior configured in `_config.yml` for medium screen
@media #{$medium-only} {
    #sidebar {
        &[data-behavior="1"],
        &[data-behavior="2"],
        &[data-behavior="3"] {
            @include sidebar-md;
        }
        &[data-behavior="4"],
        &[data-behavior="5"] {
            left: -#{map-get($sidebar, lg-screen-width)};
            @include sidebar-lg;
        }
        &[data-behavior="6"] {
            left: -#{map-get($sidebar, md-screen-width)};
            @include sidebar-md;
        }
    }
}

// Define sidebar behavior configured in `_config.yml` for large screen
@media #{$large-only} {
    #sidebar {
        &[data-behavior="1"],
        &[data-behavior="2"] {
            @include sidebar-lg;
        }
        &[data-behavior="3"] {
            @include sidebar-md;
        }
        &[data-behavior="4"],
        &[data-behavior="5"] {
            left: -#{map-get($sidebar, lg-screen-width)};
            @include sidebar-lg;
        }
        &[data-behavior="6"] {
            left: -#{map-get($sidebar, md-screen-width)};
            @include sidebar-md;
        }
    }
}

@media #{$xlarge-and-up} {
    #sidebar {
        &[data-behavior="1"] {
            @include sidebar-xlg;
        }
        &[data-behavior="2"] {
            @include sidebar-lg;
        }
        &[data-behavior="3"] {
            @include sidebar-md;
        }
        &[data-behavior="4"] {
            left: -#{map-get($sidebar, xlg-screen-width)};
            @include sidebar-xlg;
        }
        &[data-behavior="5"] {
            left: -#{map-get($sidebar, lg-screen-width)};
            @include sidebar-lg;
        }
        &[data-behavior="6"] {
            left: -#{map-get($sidebar, md-screen-width)};
            @include sidebar-md;
        }
        // hide bio in sidebar when small sidebar is enabled
        &[data-behavior="2"],
        &[data-behavior="3"],
        &[data-behavior="5"],
        &[data-behavior="6"] {
            .sidebar-profile-bio {
                display: none;
            }
        }
    }
}

// display author bio only on extra large screen
@media #{$large-and-down} {
    #sidebar .sidebar-profile-bio {
        display: none;
    }
}
